<template>
	<view class="service-box">
		<view class="title font40 color-b3 f-b m-l-30">
			{{ serviceObj.title }}
		</view>
		<view class="flex flex-wrap m-t-20">
			<view class="meal-item m-l-30" v-for="(item, index) in serviceObj.list" :key="index" @click="toDetail">
				<image style="width: 232rpx;height: 232rpx;" :src="item.picUrls" mode=""></image>
				
				<view class="font32 color-181D18 text-ellipsis">
					{{ item.title }}
				</view>	
				<text class="price f-b font32">¥{{ item.salesPrice }}</text>
				<view class="flex flex-align-center flex-space-between">
					<view class="font24 color-3FA897">
						{{ item.merchant }}分
					</view>
					<view class="font24 color-8E8E8E">
						销量{{ item.salesVolumn }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		serviceObj: {
			type: Object,
			default: {}
		}
	});
	function toDetail(){
		uni.navigateTo({
			url:'/pages/accompany-tmp/detail/detail'
		})
	}
</script>

<style lang="scss" scoped>
	.service-box {
		margin-top: 40rpx;
	}
	.meal-item {
		width: 232rpx;
		margin-bottom: 30rpx;
		image {
			border-radius: 20rpx;
		}
		.line {
			width: 232rpx;
		}
		.price {
			color: #F52200;
		}
	}
</style>
